<template>
  <ve-line
    :data="chartData"
    :settings="chartSettings"
    :extend="extend"
    :legend-visible="false"
    ref="veline"
  ></ve-line>
</template>

<script>
const echarts = require("echarts");
export default {
  props: ["width"],
  data: function() {
    this.extend = {
      color: ["#409eff"],
      series: {
        smooth: false,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "#409eff66"
                },
                {
                  offset: 1,
                  color: "#66b1ff2b"
                }
              ],
              false
            )
          }
        }
      },
      toolbox: {
        show: true,
        feature: {
          saveAsImage: {
            show: true,
            excludeComponents: ["toolbox"],
            pixelRatio: 2
          }
        }
      }
    };
    this.chartSettings = {
      area: true
    };
    return {
      chartData: {
        columns: ["日期", "收益"],
        rows: [
          // { 日期: "1/1", 收益: 1393 },
        ]
      }
    };
  },
  mounted() {
    this.$nextTick(_ => {
      this.$refs[`veline`].echarts.resize();
    });
  },
  watch: {
    "chartData.rows"(v) {
      this.$nextTick(_ => {
        this.$refs[`veline`].echarts.showLoading({
          text: "数据正在加载...",
          fontSize: 20,
          color: "#fbd437",
          spinnerRadius: 40,
          maskColor: "#fff"
        });
      });
      setTimeout(() => {
        this.$nextTick(() => {
          this.$refs[`veline`].echarts.hideLoading();
        });
      }, 1000);
    }
  }
};
</script>